<template>
	<view class="order-item-v2" @click="bindClick">
		<view class="order-box">
			<view class="header">
				<view class="shop-name">
					<view class="icon">
						<image :src="data.store_ico" mode="widthFix"></image>
					</view>
					<view class="name">{{data.store_name}}</view>
				</view>
				<view class="order-status" :class="data.status_str == '待付款'?'important':''">{{data.status_str}}</view>
			</view>
			<view class="content">
				<view class="goods-lists">
					<view class="goods-item" v-for="(goods,index) in data.goods_lists" :key="index">
						<view class="goods-ico">
							<image :src="goods.goods_img" mode="widthFix"></image>
						</view>
						<view class="goods-content">
							<view class="goods-info">
								<view class="goods-name">{{goods.goods_name}}</view>
								<view class="goods-spec">{{goods.goods_desc}}</view>
								<view class="tag">
									<view class="item" v-if="data.is_company">
										<view class="icon">
											<image src="../../static/tabbar/shop_active.png" mode="widthFix"></image>
										</view>
										<view class="txt">企业认证</view>
									</view>
									<view class="item" v-if="data.is_store">
										<view class="icon">
											<image src="../../static/icon/is_store.png" mode="widthFix"></image>
										</view>
										<view class="txt">店铺认证</view>
									</view>
									<view class="item" v-if="data.is_st">
										<view class="icon">
											<image src="../../static/icon/is_st.png" mode="widthFix"></image>
										</view>
										<view class="txt">担保交易</view>
									</view>
								</view>
							</view>
							<view class="goods-price-amount">
								<view class="show-box">
									<view class="goods-price-box">
										<view class="goods-price">
											<view class="big-price">
												<view class="price-show" style="font-size: 12px;">{{goods.price}}
													<view class="unit" style="font-size: 10px;white-space: nowrap;">A积分</view>
												</view>

											</view>
										</view>
									</view>
									<view class="goods-amount">x{{goods.amount}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="goods-total-price-show">
					<view class="price-box">
						<view class="amount">共{{data.total_goods_amount}}件商品</view>
						<view class="price">合计：
							<view class="big-price">
								<view class="price-show">{{data.price}}
									<view class="unit">A积分</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- <view class="order-item" @click="bindClick">
		<view class="order-box">
			<view class="header">
				<view class="shop-name"><view class="iconfont icon-dianpu"></view>{{data.shop_name}}<view class="iconfont icon-xiayiji"></view></view>
				<view class="order-status">{{data.status_str}}</view>
			</view>
			<view class="content">
				<view class="cover" style="height: 28vw;">
					<image class="lazyload" mode="widthFix" :class="{show:show}" :src="data.goods_img" @load="imgLoad()" style="height: 28vw;"></image>
				</view>
				<view class="info">
					{{data.goods_name}}
					<view class="goods-desc">规格：{{data.goods_desc}}</view>
				</view>
			</view>
			<view class="order-info">
				<view class="price">
					共1件：
					<view class="price_tag" v-if="data.pay_type==2">￥</view>
					<view class="font10 price_tag" v-else=""><view class="iconfont icon-jiasu-shengchanyanwo font10"></view></view>
					<view class="money">{{data.price}}</view>.00
				</view>
				<view class="ctime">
				{{data.ctime_str}}
				</view>
			</view>
		</view>
	</view> -->
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: function(e) {
					return {}
				}
			}
		},
		data() {
			return {
				show: false
			}
		},
		methods: {
			bindClick() {
				this.$emit('click');
			},
			imgLoad() {
				this.show = true;
			}
		},
	}
</script>

<style>
	.order-item-v2 .order-box {
		background-color: #fff;
		border-radius: 12px;
		padding: 20upx;
		margin-bottom: 12upx;
	}

	.order-item-v2 .order-box .header {
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 20upx;
	}

	.order-item-v2 .order-box .header .shop-name {
		flex-direction: row;
	}

	.order-item-v2 .order-box .header .shop-name view {
		justify-content: center;
	}

	.order-item-v2 .order-box .header .shop-name .icon {
		width: 40upx;
		height: 40upx;
		margin-right: 10upx;
	}

	.order-item-v2 .order-box .header .shop-name .icon image {
		width: 100%;
	}

	.order-item-v2 .order-box .header .shop-name .name {}

	.order-item-v2 .order-box .header .order-status.important {
		color: #ff6000;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item {
		flex-direction: row;
		margin-bottom: 30upx;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content {
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-ico {
		width: 100px;
		height: 100px;
		margin-right: 20upx;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-ico image {
		width: 100px;
		height: 100px;
		border-radius: 6px;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-info .tag {
		flex-direction: row;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-info .tag .item {
		flex-direction: row;
		margin-right: 10upx;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-info .tag .item .icon {
		width: 30upx;
		height: 30upx;
		margin-right: 10upx;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-info .tag .item .icon image {
		width: 100%;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-info .tag .item .txt {
		font-size: 10px;
		white-space: nowrap;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-info .goods-name {
		line-height: 100%;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-info .goods-spec {
		color: #888;
		font-size: 10px;
		margin-bottom: 15upx;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-info {
		width: 80%;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-price-amount {
		width: 20%;
		justify-content: flex-end;
		text-align: right;
		flex-direction: row;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-price-amount .show-box {}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-price-amount .show-box .goods-price-box view {
		display: inline;
		font-size: 12px;
		line-height: 15px;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-price-amount .show-box .goods-price-box view.big-price {
		font-size: 15px;
	}

	.order-item-v2 .order-box .content .goods-lists .goods-item .goods-content .goods-price-amount .show-box .goods-amount {
		text-align: right;
		justify-content: flex-end;
		color: #888;
	}

	.order-item-v2 .order-box .content .goods-total-price-show {
		flex-direction: row;
		justify-content: flex-end;
	}

	.order-item-v2 .order-box .content .goods-total-price-show view {
		flex-direction: row;
		display: inline;
	}

	.order-item-v2 .order-box .content .goods-total-price-show .price-box .price .big-price {
		font-size: 16px;
	}

	.order-item-v2 .order-box .content .goods-total-price-show .price-box .amount {
		margin-right: 10upx;
	}

	.order-item-v2 .order-box .content .goods-total-price-show .price-box .price,
	.order-item-v2 .order-box .content .goods-total-price-show .price-box .price view {
		display: inline;
	}

	.order-item-v2 {
		padding: 20upx;
		padding-bottom: 0;
	}
</style>
